<%@ page contentType='text/html; charset=UTF-8'%>
 
<%@ taglib prefix='s' uri='/struts-tags'%>

<link rel='stylesheet' type='text/css' href='<s:url value="/plugins/jquery-ui-1.8.13/css/custom-theme/jquery-ui-1.8.13.custom.css" />' />
<link rel='stylesheet' type='text/css' href='<s:url value="/plugins/jqGrid-4.0.0/css/ui.jqgrid.css" />' />
<link rel='stylesheet' type='text/css' href='<s:url value="/plugins/jquery-autocomplete/jquery.autocomplete.css" />' />
<script type='text/javascript' src='<s:url value="/plugins/jquery-ui-1.8.13/js/jquery-ui-1.8.13.custom.min.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jqGrid-4.0.0/js/i18n/grid.locale-es.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jqGrid-4.0.0/js/jquery.jqGrid.min.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jquery-autocomplete/jquery.ajaxQueue.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jquery-autocomplete/jquery.autocomplete.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jquery-autocomplete/jquery.bgiframe.min.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jquery-autocomplete/jquery.thickbox-compressed.js" />'></script>

<p>
<s:form action="listarInscritos">
<input id="linscritos" type="submit" value="Listar Inscritos" disabled="disabled" />
<input type="hidden" name="hlistarinscritos" />
</s:form>
</p>
<div id='i-gridContainer'>
    <table id='cursoGrid'><tr><td/></tr></table>
</div>
<div id='pager'></div>
<p>
<s:form action="gestionarEvaluaciones">
<input id='gestionar_evaluaciones' type='submit' value='Consultar Evaluaciones' disabled="disabled"/>
<input type="hidden" name="hgestionarevaluaciones" />
</s:form>
</p>

<script type='text/javascript'>
var w = {
      currentRow: null
    },
    categoria = 'Idiomas:Idiomas;Capacitacion profesional:Capacitacion profesional',
    buildSelect = function(options, elem, val){
        var $s = undefined === elem ? $('<select></select>') : $(elem);
        $s.empty();
        $.each(options.split(';'), function(){
            var opt = this.split(':');
            opt[0] = opt[0].replace(/_/g, ':');
            opt[1] = opt[1].replace(/_/g, ':');
            var selected = undefined !== val && opt[0] == val ? ' selected=\'selected\'' : '';
            $s.append('<option value=\'' + opt[0] + '\'' + selected + '>' + opt[1] + '</option>');
        });
        return $s;
    },
    htmlSelect = function(options){
        var $s = buildSelect(options);
        return '<select>' + $s.html() + '</select>';
    }
    formOptions = {
        addCaption: 'Agregar registro de curso',
        editCaption: 'Modificar registro de curso',
        modal: true,
        recreateForm: true,
        bSubmit: 'Guardar',
        bCancel: 'Cancelar',
        bClose: 'Cerrar',
        saveData: 'Se han modificado datos, desea guardar?',
        bYes: 'Sí',
        bNo: 'No',
        bExit: 'Cancelar',
        errorTextFormat: function(msg){
           msg = jQuery.parseJSON(msg.responseText);
           var r = '<ul class="jq-error-ul">';
           $.each(msg, function(key, val){
               r += '<li><b>' + key + '</b>:' + val + '</li>';
           })
           return r + '</ul>';
        }
    },
    formEditOptions = {},
    formCreateOptions = {};

$.extend(formEditOptions, formOptions, {
    url: '<s:url action="editarCurso" />',
    closeAfterEdit: true
});
$.extend(formCreateOptions, formOptions, {
    url: '<s:url action="crearCurso" />',
    closeAfterAdd: true
});


jQuery('#cursoGrid').jqGrid({  
    url:'<s:url action="listardictadosCurso" />',
    datatype: 'json',  
    colNames:['Nombre', 'Seccion', 'Categoría','Descripción','Días'],  
    colModel:[  
        {
            name: 'nombre',
            index: 'nombre',
            width:60,
            editable: true
        },
        {
            name: 'seccion',
            index: 'seccion',
            width:40,
            editable: true
        },
        {
            name:'categoria',
            index:'categoria',
            width:60,
            editable:true,
            edittype: 'select',
            editoptions: {
                value: categoria
            },
            stype: 'select',
            searchoptions: {
                dataUrl: '<s:url action="dummy" />',//No se va a usar, queremos que se llame a buildSelect
                buildSelect: function(){return htmlSelect(categoria)},
                dataInit: function(elem){
                    $(elem).change();
                },
                sopt: ['eq','ne']
            }
        },
        {
            name:'descripcion',
            index:'descripcion',
            width:150,
            editable: true
        },       
        {
            name: 'dias',
            index: 'dias',
            width: 100,
            editable: true
        }
    ],
    rowNum:20,
    rowList:[10,20,50,100],
    pager: $('#pager'),
    viewrecords: true,
    sortorder: 'desc',
    caption: 'Curso',
    width:650,
    height: 'auto',
    onSelectRow: function(id){
        $('#linscritos').removeAttr('disabled');
        $('#gestionar_evaluaciones').removeAttr('disabled');
        w.currentRow = id;
        $('input[name=hlistarinscritos]').val(id);
        $('input[name=hgestionarevaluaciones]').val(id);
    },
    onPaging: function(){
        $('#linscritos').attr('disabled', true);
        $('#gestionar_evaluaciones').attr('disabled', true);
        w.currentRow = null;
    }
});
</script>